<template>
	<div class="login">
		<Logo></Logo>
		<group>
		    <x-input title="账户" v-model="form.phone" type="tel">
		    	<img slot="label" class="icon" :src="icon.phone" width="24" height="24">
		    </x-input>
		    <x-input title="密码" v-model="form.password" type="password">
		    	<img slot="label" class="icon" :src="icon.password" width="24" height="24">
		    </x-input>
		</group>
		<div class="submit">
		   	<x-button @click.native="login" :disabled="btn.disabled" :show-loading="btn.loading">登录</x-button>
		</div>
		<flexbox class="links">
	      <flexbox-item :span="1/3"><router-link to="/register">注册</router-link></flexbox-item>
	      <flexbox-item :span="1/3"></flexbox-item>
	      <flexbox-item :span="1/3"><router-link to="/password">忘记密码</router-link></flexbox-item>
	    </flexbox>
	</div>
</template>
<script>
	import { XInput, Group, XButton,Flexbox, FlexboxItem} from 'vux'

	import Logo from 'touch/components/logo';
	import Axios from 'touch/config/axios';
	import Va from 'async-validator';

	const formRule = {
	  	phone: [
	  		{type: "string", required: true,message :'请填写登录账户'},
	  		{validator(rule, value, callback, source, options) {
		      	if(!(/^(139|138|137|136|135|134|147|150|151|152|157|158|159|178|182|183|184|187|188|130|131|132|155|156|185|186|145|176|133|153|177|173|180|181|189|170|171)\d{8}$/.test(value))){
	               	callback('手机号码格式错误');
	            }
	            callback();
		    }}
	  	],
	  	password : [
	  		{type : "string" , required: true , message : '请填写登录密码'},
	  		{ min: 6, max: 15,message : '密码长度6-15'}
	  	],
	};

	export default {
		components:{
			Logo,
			XInput,
		    XButton,
		    Group,
		    Flexbox, 
		    FlexboxItem,
        },
        data (){
	        return{
	            form :{
	            	phone : '',
	            	password : '',
	            },
	            icon :{
	            	phone : require('touch/assets/icon/personal-center.png'),
	            	password : require('touch/assets/icon/password.png'),
	            },
	            btn :{
	            	disabled : false,
	            	loading : false,
	            },
	            formBool : true,
	        }
	    },
	    methods: {
			GetQueryString(name)
			{
			    var reg = new RegExp("(^|&|)"+ name +"=([^&]*)(&|$)");
			    var r = window.location.href.substr(1).match(reg);
			    if(r!=null)return  unescape(r[2]); return null;
			},
			formValidate(){
				this.formBool = true;
				new Va(formRule).validate(this.form, (errors, fields) => {
				  	if(errors) {
				  		this.$vux.toast.show({type : 'text', text: errors[0].message});
				  		this.formBool = false;
				  	}
				});
			},
	        login() {
	        	this.formValidate();
	        	if(!this.formBool) return false;
	        	this.btn.disabled = true;
	        	this.btn.loading = true;
                Axios.Auth.Login(this.form)
	            .then(res =>{
                	this.btn.disabled = false;
	        		this.btn.loading = false;
            		if(!res) return false;
            		this.$vux.toast.show({type : 'text', text: res.msg});
                	var returnUrl = '/#/index';
                	var path = this.GetQueryString('path');
                	if(path!=null){
                		returnUrl = '/#'+path;
                	}
                	setTimeout(function(){
                		window.location.href=returnUrl;
                	}, 1000);
	            })
	        },
	    },
	}
</script>
<style>
	.login{padding-left: 15px; padding-right: 15px;}
	.login .icon{padding-right:20px;display:block;}
	.login .submit{margin-top: 15px;margin-bottom: 15px;}
	.login .links{margin-top: 15px;text-align: center;font-size: 14px;}
	.login .links a{color: #2d8cf0;text-decoration: none;}
</style>